<template>
  <div>
    <h1>Pagination</h1>
    <button
      v-for="page in total"
      :key="page"
      :class="{ active: page === current }"
      @click="changeCurrent(page)"
    >
      {{ page }}
    </button>
    <!-- 
      注意:不要在表单中双向绑定 父组件传递过来的props数据
     -->
    <select :value="limit" @change="changeLimit($event.target.value)">
      <option :value="3">每页3条</option>
      <option :value="5">每页5条</option>
      <option :value="7">每页7条</option>
      <option :value="9">每页9条</option>
    </select>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  /* props的第一种接受方式:书写一个数组,直接接受值 */
  // props: ["current", "limit", "total", "changeCurrent", "changeLimit"],
  /* props的第二种的接收方式:书写一个对象,key是接受的props,值是当前限制的类型 */
  /* props: {
    current: Number,
    limit: Number,
    total: Number,
    changeCurrent: Function,
    changeLimit: Function,
  }, */
  /* props的第三种接受方式:书写一个对象,可以是接受的props,值是一个对象,对这个props进行更多的配置比如(type,default,required) */
  props: {
    a: {
      type: Number,
      // required: true,
    },
    current: {
      type: Number,
      required: true,
      default: 1,
    },
    limit: Number,
    total: Number,
    changeCurrent: Function,
    changeLimit: Function,
  },
};
</script>

<style scoped>
.active {
  background-color: red;
}
</style>
